<template>
  <div class="detail_container">
    <div class="detail_bgc"></div>
    <div class="detail_content" @click="gostrict">精选专题 ></div>
    <div class="detail_wrapper">
      <div class="detail_slide">
        <div class="detail_item" v-for="item in detaillist" :key="item.id">
          <img :src="item.pic" alt="" />
          <p class="detail_one">{{ item.title }}</p>
          <p class="detail_two">{{ item.descript }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detaillist: [],
    };
  },
  mounted() {
    this.$API.getdetail().then((res) => {
      console.log(res);
      this.detaillist = res.data.data;
    });
  },
  methods: {
    gostrict(){
      this.$router.push("/strictdetail")
    }
  },
};
</script>

<style scoped>
.detail_container {
  width: 100%;
}
.detail_bgc {
  width: 100%;
  height: 0.3rem;
  background-color: rgb(238, 237, 237);
}
.detail_content {
  width: 100%;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
}
.detail_wrapper {
  width: 100%;
  height: 5rem;
  /* background-color: green; */
  overflow: scroll;
}
.detail_slide {
  width: 300%;
  height: 4rem;
  display: flex;
  justify-content: space-around;
}
.detail_item img {
  width: 97%;
  height: 3rem;
}
/* .detail_item {
  width: 90%;
} */
.detail_one {
  font-size: 0.3rem;
}
.detail_two {
  font-size: 0.14rem;
  color: #a8a8a8;
  margin-top: 0.2rem;
  width: 3.24rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>